<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 设备管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>设备列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-row>
          <el-col :span="4">
            <el-input v-model="query.account_search" placeholder="账号搜索"></el-input>
          </el-col>
          <el-col :span="4">
            <el-select v-model="query.status" placeholder="设备状态" clearable>
              <el-option label="空闲" value="1"></el-option>
              <el-option label="登录QQ中" value="2"></el-option>
              <el-option label="已登录" value="3"></el-option>
              <el-option label="等游戏中" value="4"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="query.is_online" placeholder="是否在线" clearable>
              <el-option label="在线" :value="true"></el-option>
              <el-option label="离线" :value="false"></el-option>
            </el-select>
          </el-col>
          <!-- <el-col :span="4">
            <el-date-picker
              v-model="query.start_time"
              type="datetime"
              placeholder="最后活跃开始时间">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-date-picker
              v-model="query.end_time"
              type="datetime"
              placeholder="最后活跃结束时间">
            </el-date-picker>
          </el-col> -->
          <el-col :span="4" style="margin-left: 2%;display: flex;">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            <el-button type="primary" @click="queryReset">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table
        :data="tableData"
        v-loading="loading"
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">
            {{ (query.page - 1) * query.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="device_code" label="设备编号" width="150" align="center"></el-table-column>
        <el-table-column prop="is_online" label="是否在线" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_online ? 'success' : 'info'">
              {{ scope.row.is_online ? '在线' : '离线' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="statusTagType(scope.row.status)">
              {{ statusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="current_account" label="当前账号" width="150" align="center"></el-table-column>
        <el-table-column prop="last_active" label="最后活跃时间" width="180" align="center">
          <template slot-scope="scope">
            {{ formatTime(scope.row.last_active) }}
          </template>
        </el-table-column>
        <el-table-column prop="last_update" label="最后更新时间" width="180" align="center">
          <template slot-scope="scope">
            {{ formatTime(scope.row.last_update) }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next, sizes"
          :page-sizes="[10, 20, 50, 100, 500, 1000]"
          @size-change="handleSizeChange"
          :current-page="query.page"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'device_list',
  data() {
    return {
      query: {
        page: 1,
        pageSize: 10,
        status: null,
        account_search: '',
        start_time: '',
        end_time: '',
        is_online: null
      },
      loading: false,
      tableData: [],
      multipleSelection: [],
      pageTotal: 0,
      //获取列表请求
      getList: function() {
        let that = this;
        this.loading = true;
        this.api.get('device-getPage', this.query, res => {
          that.tableData = res.data.list;
          that.query.page = res.data.page;
          that.query.pageSize = res.data.pageSize;
          that.pageTotal = res.data.pageTotal;
          that.loading = false;
        }, () => { that.loading = false; }, undefined, this);
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 状态转中文
    statusText(status) {
      if (status == 1) return '空闲';
      if (status == 2) return '登录QQ中';
      if (status == 3) return '已登录';
      if (status == 4) return '等游戏中';
      return '未知';
    },
    statusTagType(status) {
      // 空闲：绿色，登录QQ中：橙色，已登录：蓝色，等游戏中：紫色
      if (status == 1) return 'info '; // 绿色
      if (status == 2) return 'warning'; // 橙色
      if (status == 3) return 'success';    // 蓝色
      if (status == 4) return 'purple';  // 紫色（自定义）
      return '';
    },
    // 时间戳转日期
    formatTime(ts) {
      if (!ts) return '';
      let t = parseInt(ts);
      if (isNaN(t)) return ts;
      let d = new Date(t * 1000);
      return d.getFullYear() + '-' + (d.getMonth()+1).toString().padStart(2,'0') + '-' + d.getDate().toString().padStart(2,'0') + ' ' + d.getHours().toString().padStart(2,'0') + ':' + d.getMinutes().toString().padStart(2,'0') + ':' + d.getSeconds().toString().padStart(2,'0');
    },
    // 重置查询条件
    queryReset() {
      this.query = {
        page: 1,
        pageSize: 10,
        status: null,
        account_search: '',
        start_time: '',
        end_time: ''
      };
      this.getList();
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'page', 1);
      this.getList();
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handlePageChange(val) {
      this.$set(this.query, 'page', val);
      this.getList();
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 150px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.gl_t{
  font-weight: bold;
}
.el-tag.purple {
  background-color: #a259e6;
  border-color: #a259e6;
  color: #fff;
}
</style>